<template>
  <div class="pending-common-counter">
    <span>
      <!-- <i
        @click="cancleTest"
        class="CAP cap-icon-Close icon-style">
      </i> -->
      <a-icon @click="cancelSelected"
              type="close" />
    </span>
    <div class="counter-split"></div>
    <span>{{ currentSelected }}</span>
    <span>/</span>
    <span>
      <span>{{ total }}</span>
      {{ $i18n('cap.template.param.check.pageTotol2') }}
    </span>
  </div>
</template>
<script>
  export default {
    name: 'CommonCounter',
    props: {
      currentSelected: {
        type: Number,
        default: 0
      },

      total: {
        type: Number,
        default: 0
      }
    },
    methods: {
      cancelSelected() {
        this.$emit('cancelSelected');
      }
    }
  };
</script>

<style scoped lang="scss">
  .pending-common-counter {
    border: 1px solid #d9d9d9;
    margin-right: 8px;
    padding: 0 8px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    min-width: 85px;
    height: 30px;
    .icon-style {
      font-size: 14px;
      cursor: pointer;
    }

    .counter-split {
      border-left: 1px solid #d9d9d9;
      margin: 0 6px;
      height: 12px;
    }
  }
</style>
